import { Component, OnInit, ElementRef, Directive } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { NzModalService } from 'ng-zorro-antd';
import { InquiryInfoComponent } from '../inquiryinfo/inquiryinfo-component.component';

@Component({
  selector: 'app-autoinquiry',
  templateUrl: './autoinquiry.component.html',
  styleUrls: ['./autoinquiry.component.less'],
})
export class AutoInquiryComponent implements OnInit {

  controlArray: ControlArray[] = [
    {
      name: '股票代码',
      controlname: 'stockcode',
      placeholder: '请输入股票代码',
      type: 'input',
      show: true
    }, {
      name: '股票名称',
      controlname: 'stockname',
      placeholder: '请输入股票名称',
      type: 'input',
      show: true
    }, {
      name: '分组',
      controlname: 'group',
      placeholder: '请选择分组',
      type: 'input',
      show: true,
    }, {
      name: '开始时间',
      controlname: 'starttime',
      placeholder: '请选择开始时间',
      type: 'date',
      show: true,
      show_ca: false,
    }, {
      name: '结束时间',
      controlname: 'endtime',
      placeholder: '请选择结束时间',
      type: 'date',
      show: false,
      show_ca: false,
    }];

  isCollapse = true;
  searchForm: FormGroup;

  dataSet = [{
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York Park',
  }];

  constructor(
    private fb: FormBuilder,
    private nzModalService: NzModalService
  ) { }

  ngOnInit() {
    this.initSearchForm();
    document.body.addEventListener('click', () => {
      this.controlArray.forEach(element => {
        if (element.type == 'date') {
          element.show_ca = false;
        }
      });
    });
  }

  initSearchForm() { //初始化表单
    this.searchForm = this.fb.group({
      'stockcode': [],
      'stockname': [],
      'group': [],
      'starttime': [new Date(new Date().valueOf() - 1000 * 60 * 60 * 24 * 7)],
      'endtime': [new Date()]
    });
  }

  toggleCollapse(): void {
    this.isCollapse = !this.isCollapse;
    this.controlArray.forEach((c, index) => {
      c.show = this.isCollapse ? (index < 4) : true;
    });
  }

  show_ca(e: Event, ctrl) {
    e.cancelBubble = true;
    ctrl.show_ca = true;
  }

  editInquiry(isregister: boolean) {
    this.nzModalService.create({
      nzTitle: isregister ? '新建股票询价' : '修改股票询价',
      nzContent: InquiryInfoComponent,
      nzWidth: 900,
      nzComponentParams: { isregister }
    });
  }

}

interface ControlArray {
  name: string,
  controlname: string,
  placeholder: string,
  type: string,
  show: boolean,
  show_ca?: boolean,
}